<template lang="pug">
  div.mn
    div.hd
      top-banner
      split
    div.bd
      div.btn-w
        div.btn-item(v-for="(item,index) in voteColumnList" :key="item.id")
          el-button.btn-cell(type="primary" :disabled="!item.isActive" size="medium" @click="handlerClickBtnVoteColumn(item)") {{item.text}}

</template>

<script type="text/ecmascript-6">
import {voteCourseItemURL, voteTeacherItemURL, voteTeamItemURL} from '../config/global.toml'
import Split from '../components/Split'
import TopBanner from '../components/TopBanner'
import {mapActions} from 'vuex'

export default {
  metaInfo: {
    title: '选择投项'
  },
  data() {
    return {
      voteColumnList: []
    }
  },
  mounted() {
    this.getVoteColumn()
  },
  methods: {
    ...mapActions(['setCurrentVoteColumn']),
    async getVoteColumn() {
      let targetUrls = [
        {
          url: voteCourseItemURL,
          maxItemLength: 10,
          minItemLength: 5
        },
        {
          url: voteTeacherItemURL,
          maxItemLength: 10,
          minItemLength: 5
        },
        {
          url: voteTeamItemURL,
          maxItemLength: 5,
          minItemLength: 1
        }
      ]
      let voteColumns = []
      for (let key in targetUrls) {
        let item = targetUrls[key]
        let {data: {data, totalCount}} = await this.$http.get(item.url, {
          params: {
            showType: '0'
          }
        })
        // let voteList = data[0].voteList
        let voteConfig = data[0].voteConfig
        // let isActive = voteList[0].voteCount === null
        let text = voteConfig.voteName
        let voteColumn = {
          id: voteConfig.id,
          text,
          totalCount,
          url: item.url,
          maxItemLength: item.maxItemLength,
          minItemLength: item.minItemLength,
          isActive: true
        }
        voteColumns.push(voteColumn)
      }
      this.voteColumnList = voteColumns
      console.log('voteColumns:', voteColumns)
    },
    handlerClickBtnVoteColumn(item) {
      this.setCurrentVoteColumn({
        id: item.id,
        mainTitle: item.text,
        endDate: item.endDate,
        startDate: item.startDate,
        voteType: item.voteType,
        maxItemLength: item.maxItemLength,
        minItemLength: item.minItemLength,
        url: item.url,
        voteList: item.voteList,
        totalCount: item.totalCount
      })
      this.$router.push({name: 'Home'})
    }
  },
  components: {
    Split,
    TopBanner
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .btn-w
    width 1004px
    margin 0 auto
    display flex
    flex-wrap wrap
    padding 12px
    .btn-item
      width 50%
      padding 12px
      box-sizing border-box
      .btn-cell
        display block
        width 100%
        height 60px
        font-size 18px

  .mn
    height 100%
    display flex
    flex-direction column
    .bd
      flex 1
      display flex
      flex-direction column
      overflow hidden
    .main
      flex 1
      overflow auto
</style>
